<%@ include file="common/tag.jsp" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Tree</title>
		<link rel="stylesheet" type="text/css" href="${ctx }/res/jquery-easyui-1.4.2/themes/bootstrap/easyui.css">
		<link rel="stylesheet" type="text/css" href="${ctx }/res/jquery-easyui-1.4.2/themes/icon.css">
	</head>
	<body>
		<div style="margin:20px 0;">
			<a href="#" class="easyui-linkbutton" onclick="collapseAll()">CollapseAll</a>
			<a href="#" class="easyui-linkbutton" onclick="expandAll()">ExpandAll</a>
			<a href="#" class="easyui-linkbutton" onclick="expandTo()">ExpandTo</a>
			<a href="#" class="easyui-linkbutton" onclick="getSelected()">GetSelected</a>
		</div>
		<div style="margin:10px 0">
			<input type="checkbox" checked onchange="$('#tt').tree({cascadeCheck:$(this).is(':checked')})">CascadeCheck 
			<input type="checkbox" onchange="$('#tt').tree({onlyLeafCheck:$(this).is(':checked')})">OnlyLeafCheck
		</div>
		<div class="easyui-panel" style="padding:5px;width: 250px;">
			<ul id="tt" class="easyui-tree" data-options="url:'areaList',method:'get',animate:true,checkbox:true,loadFilter:myLoadFilter"></ul>
		</div>
	</body>
	<script type="text/javascript" src="${ctx }/res/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx }/res/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		function collapseAll(){
			$('#tt').tree('collapseAll');
		}
		function expandAll(){
			$('#tt').tree('expandAll');
		}
		function expandTo(){
			var node = $('#tt').tree('find',797);
			$('#tt').tree('expandTo', node.target).tree('select', node.target);
		}
		function getSelected(){
			var node = $('#tt').tree('getSelected');
			if (node){
				var s = node.text+","+node.id+","+node.checked;
				alert(s);
			}
		}
		function getChecked(){
			var nodes = $('#tt').tree('getChecked');
			var s = '';
			for(var i=0; i<nodes.length; i++){
				if (s != '') s += ',';
				s += nodes[i].text;
			}
			alert(s);
		}
		function myLoadFilter(data,parent){
			var t = $(this);
		    var opts = t.tree('getParent');
		    console.log(opts);
			if(opts){
				var c = opts.checked;
				alert(c);
				if(c){
					for(var i=0; i<data.length; i++){
			           data[i].checked = c;
			        }
				}
			}
			return data;
		}
		function myLoadFilter2(data,parent){
			var state = $.data(this, 'tree');
		    function setData(){
		    	var serno = 1;
		        var todo = [];
		        for(var i=0; i<data.length; i++){
		            todo.push(data[i]);
		        }
		        while(todo.length){
		            var node = todo.shift();
		            if (node.id == undefined){
		            	node.id = '_node_' + (serno++);
		            }
		            if (node.children){
		                node.state = 'closed';
		                node.children1 = node.children;
		                node.children = undefined;
		                todo = todo.concat(node.children1);
		            }
		        }
		        state.tdata = data;
		    }
		    function find(id){
		    	var data = state.tdata;
		    	var cc = [data];
		    	while(cc.length){
		    		var c = cc.shift();
		    		for(var i=0; i<c.length; i++){
		    			var node = c[i];
		    			if (node.id == id){
		    				return node;
		    			} else if (node.children1){
		    				cc.push(node.children1);
		    			}
		    		}
		    	}
		    	return null;
		    }
		    
		    //setData();
		    
		   /*  var t = $(this);
		    var opts = t.tree('options');
		    //绑定节点展开前事件
		    opts.onBeforeExpand = function(node){
	    		var n = find(node.id);
	    		if (n.children && n.children.length){return}
		    	var filter = opts.loadFilter;
		    		opts.loadFilter = function(data){return data;};
		    		t.tree('append',{
		    			parent:node.target,
		    			data:n.children1
		    		});
		    		opts.loadFilter = filter;
		    		n.children = n.children1;
		    }; */
			return data;
		}
	</script>
</html>
